<template>
  <view
    class="tn-column-notice"
    :class="[noticeClass]"
    :style="noticeStyle"
  >
    <!-- 左图标 -->
    <view
      v-if="!!leftIcon"
      class="tn-column-notice__left-icon"
      :class="[leftIconClass]"
      :style="leftIconStyle"
      @tap.stop="handleLeftIconClick"
    >
      <tn-icon :icon="leftIcon"></tn-icon>
    </view>
    <!-- 通知内容 -->
    <swiper
      class="tn-column-notice__swiper"
      :vertical="mode === 'vertical'"
      circular
      :autoplay="autoplay && playStatus === 'play'"
      :interval="duration"
      :style="[contentStyle]"
    >
      <swiper-item
        v-for="(item, index) in data"
        :key="index"
        class="tn-column-notice__swiper-item"
      >
        <view class="tn-column-notice__content tn-text-ellipsis-1" @tap.stop="handleNoticeClick(index)">
          {{ item }}
        </view>
      </swiper-item>
    </swiper>
    <!-- 右图标 -->
    <view
      v-if="!!rightIcon"
      class="tn-column-notice__right-icon"
      :class="[rightIconClass]"
      :style="rightIconStyle"
      @tap.stop="handleRightIconClick"
    >
      <tn-icon :icon="rightIcon"></tn-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { columnNoticeProps, columnNoticeEmits } from '../../../types/tn-notice-bar'
import { computed, watchEffect, CSSProperties } from 'vue'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import TnIcon from '../../tn-icon/src/Icon.vue'


const props = defineProps(columnNoticeProps)
const emits = defineEmits(columnNoticeEmits)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析左图标颜色
const leftIconColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.leftIconColor || '')
})
// 解析右图标颜色
const rightIconColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.rightIconColor || '')
})

// 通知栏样式
const noticeStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }
  if (componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }
  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }

  return Object.assign(style, props?.customStyle || {})
})
// 通知内容高度
const contentStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.fontSize) {
    style.height = `calc(${handleValueWithUnit(props.fontSize)} + 4rpx)`
  }
  return style
})
// 左图标样式
const leftIconStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (leftIconColor.value.type === 'style') {
    style.color = leftIconColor.value.value
  }
  if (!!props?.leftIconSize) {
    style.fontSize = props.leftIconSize
  }
  return style
})
// 右图标样式
const rightIconStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (rightIconColor.value.type === 'style') {
    style.color = rightIconColor.value.value
  }
  if (!!props?.rightIconSize) {
    style.fontSize = props.rightIconSize
  }
  return style
})

// 通知栏对应的类
const noticeClass = computed<string>(() => {
  let clazz: string[] = []

  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }
  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }

  return clazz.join(' ')
})
// 左图标对应的类
const leftIconClass = computed<string>(() => {
  let clazz: string[] = []
  if (leftIconColor.value.type === 'class') {
    clazz.push(leftIconColor.value.value)
  }
  return clazz.join(' ')
})
// 右图标对应的类
const rightIconClass = computed<string>(() => {
  let clazz: string[] = []
  if (rightIconColor.value.type === 'class') {
    clazz.push(rightIconColor.value.value)
  }
  return clazz.join(' ')
})

// 点击左图标事件
const handleLeftIconClick = () => {
  emits('left-click')
}
// 点击右图标事件
const handleRightIconClick = () => {
  emits('right-click')
}
// 点击通知事件
const handleNoticeClick = (index: number) => {
  emits('click', index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

.tn-column-notice {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: inherit;
  padding: 10rpx 20rpx;
  font-size: 28rpx;

  &__swiper {
    flex: 1;
    width: 100%;
    height: calc(28rpx + 4rpx);
    line-height: 1.2em;
  }
  &__swiper-item {
    width: 100%;
    height: 100%;
  }
  &__content {
    width: 100%;
  }

  &__left-icon {
    margin-right: 8rpx;
  }
  &__right-icon {
    margin-left: 8rpx;
  }
}
</style>
